<template>
  <el-drawer
    v-if="dialogVisible"
    :title="title"
    :visible.sync="dialogVisible"
    size="50%"
    @close="onClose"
  >
    <el-card>
      <div slot="header">
        <div class="tools-select">
          <el-row>
            <el-col>
              <el-form
                :inline="true"
                :model="form"
                @submit.native.prevent="handleQuery()"
              >
                <el-form-item>
                  <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    size="mini"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="开始日期"
                    @change="handleQuery"
                    @clear="handleQuery"
                  />
                </el-form-item>
                <el-form-item>
                  <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    size="mini"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="结束日期"
                    @change="handleQuery"
                    @clear="handleQuery"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-search"
                    native-type="submit"
                  >查询
                  </el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 表格区 -->
      <el-table size="mini" stripe :data="tableData" border>
        <el-table-column align="center" label="序号" type="index" width="50px"/>
        <el-table-column align="center" label="开始时间" prop="startTime"/>
        <el-table-column align="center" label="结束时间" prop="endTime"/>
        <el-table-column align="center" label="创建时间" prop="createTime"/>
        <el-table-column align="center" label="更新时间" prop="updateTime"/>
        <el-table-column align="center" label="状态">
          <template v-slot="scope">
            <el-tag size="mini" type="success" v-if="scope.row.enabled">执行成功</el-tag>
            <div v-if="!scope.row.enabled">
              <el-tag size="mini">执行失败</el-tag>
              <el-tooltip class="item" effect="dark" :content="scope.row.error" placement="top-start">
                <i class="el-icon-warning"/>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" v-if="$store.getters.roles.includes('SYS_JOB_LOG_DELETE')">
          <template v-slot="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <el-pagination
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </el-drawer>
</template>

<script>
import { getPage, deleteById } from '@/api/sysJobLog'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      tableData: [],
      form: {
        name: '',
        startTime: '',
        endTime: ''
      },
      page: {
        pageSize: 10,
        pageNum: 1,
        total: undefined
      }
    }
  },
  methods: {
    onShow(name, service) {
      if (service) {
        this.form.name = service
        this.handleQuery()
      }
      this.title = name
      this.dialogVisible = true
    },
    onClose() {
      this.form.name = ''
      this.dialogVisible = false
    },
    handleQuery() {
      getPage({
        pageSize: this.page.pageSize,
        pageNum: this.page.pageNum,
        name: this.form.name,
        startTime: this.form.startTime,
        endTime: this.form.endTime
      }).then((res) => {
        this.tableData = res.data.records
        this.page.total = res.data.total
      })
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.handleQuery()
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum
      this.handleQuery()
    },
    handleDelete(id) {
      deleteById(id).then(res => {
        if (res.code === 20000) {
          this.handleQuery()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped>

.el-card.is-always-shadow {
  box-shadow: 0px 0px 0px 0px !important;
}

.el-drawer__wrapper /deep/
.el-drawer__header {
  margin-bottom: 10px !important;
}

.el-pagination {
  margin-top: 20px;
}
</style>
